<template>
  <div id="type-race-bar" style="height: 160px; width: 160px; margin: 0 auto;"></div>
</template>

<script>
export default {
  name: "RaceBar",
  props: {
    data: {
      default: [52, 81, 23, 10, 32]
    }
  },
  data() {
    return {
      myChart: ''
    }
  },
  methods: {
    myTypeRaceChat() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('type-race-bar'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', ()=> {
        this.myChart.resize()
      })
      // 指定图表的配置项和数据
      let option = {
        darkMode: true,
        color: ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff'],
        legend: {
          show: false
        },
        grid: {
          top: '0%',
          left: '20%',
          right: '0%',
          height: '85%',
          width: '68%'
        },
        xAxis: {
          max: 'dataMax',
          axisLabel: {
            color: '#FFF'
          },
          splitLine: { show: false}
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            color: '#FFF'
          },
          data: ['休眠', '正常', '异常', '警告', '关机'],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 4 // only the largest 5 bars will be displayed
        },
        series: [{
          realtimeSort: true,
          name: 'X',
          type: 'bar',
          data: [
            {
              value: this.data[0],
              itemStyle: {
                color: '#4992ff'
              }
            },
            {
              value: this.data[1],
              itemStyle: {
                color: '#7cffb2'
              }
            },
            {
              value: this.data[2],
              itemStyle: {
                color: '#fddd60'
              }
            },
            {
              value: this.data[3],
              itemStyle: {
                color: '#ff6e76'
              }
            },
            {
              value: this.data[4],
              itemStyle: {
                color: '#58d9f9'
              }
            },
          ],
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          }
        }],
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }
      this.myChart.setOption(option)
    }
  },
  mounted() {
    this.myTypeRaceChat()
  },
  watch: {
    data(newVal) {
      this.myChart.setOption({
        series: [{
          data: [
            {
              value: newVal[0],
              itemStyle: {
                color: '#4992ff'
              }
            },
            {
              value: newVal[1],
              itemStyle: {
                color: '#7cffb2'
              }
            },
            {
              value: newVal[2],
              itemStyle: {
                color: '#fddd60'
              }
            },
            {
              value: newVal[3],
              itemStyle: {
                color: '#ff6e76'
              }
            },
            {
              value: newVal[4],
              itemStyle: {
                color: '#58d9f9'
              }
            }
          ]
        }]
      })
    }
  }
}
</script>

<style scoped>

</style>